<template>
  <view>
    <view v-if="mode == 'form'">
      <view v-for="item in data" :key="item.name">
        <up-form :labelPosition="labelPosition" :labelWidth="labelWidth">
          <up-form-item :label="item.name">
            <u-input
              v-model="item.value"
              v-if="item.inputType == 'input'"
              readonly
              border="surround"></u-input>
            <up-textarea
              v-model="item.value"
              v-if="item.inputType == 'textarea'"
              :disabled="true"
              border="surround"></up-textarea>
            <up-album
              :urls="item.value"
              multipleSize="100"
              v-if="item.inputType == 'image'"></up-album>
          </up-form-item>
        </up-form>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  mode: {
    type: String,
    default: "form",
  },
  labelPosition: {
    type: String,
    default: "top",
  },
  labelWidth: {
    type: String,
    default: "600",
  },
  data: {
    type: Object,
    default: () => [],
  },
});
</script>

<style lang="scss" scoped>
.u-textarea--disabled {
  background-color: transparent;
}
::v-deep {
  .u-form-item__body__left__content__label {
    margin-bottom: 10px;
  }
}
</style>
